:root {
  --primary-color: #31c27c;
}
/* 	root伪类选择器匹配文档的根元素，方便后续使用，快速更改。 */
body {
  margin: 0;
  background: #f5f5f5;
  font-family: Microsoft Yahei;
  /* 字体库 */
  font-size: 14px;
  /* min-width: 1000px; */
}
a {
  text-decoration: none;
  color: #000;
}
header {
  height: 90px;
  background: white;
  display: flex;
  /* 弹性布局 元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适应窗口大小 */
  align-items: center;
}
.header-inner, main {
  /* width: 1200px; */
  padding: 20px;
  margin: auto;
  /* auto自动左右对齐 */
}
.tag-list {
  margin-top: 50px;
  margin-bottom: 15px;
}
.tag-item {
  display: inline-block;
  /* 保留上下内外边距可更改，且不添加换行符可位于其他元素旁边 具有两个box的特点*/
  padding: 0 8px;
  /* 上下为0左右为8 */
  margin-right: 24px;
  line-height: 26px;
  color: #000;
  text-decoration: none;
}
.tag-active {
  background: var(--primary-color);
  /* 即使用上面定义的root绿色 */
  color: white;
}
.tag-item:not(.tag-active):hover {
  /* 除了内地（active） */
  color: var(--primary-color);
}
.nowrap {
  white-space: nowrap;
  /* 强制不换行，直到文本结束或者遭遇br标签对象才换行，避免出现题目太长自动换行的情况 */
  overflow: hidden;
  /* 溢出隐藏，可把内容区域超出来的部分隐藏 */
  text-overflow: ellipsis;
  /* 溢出提示，用省略号提示多出文字 ？ */
}
.playlist {
  display: grid;
  /* 二维布局系统，类似网格，整齐美观 */
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  /* 限制网格的大小 */
  gap: 45px 15px;
  /* 中间空隙大小 */
  margin-bottom: 45px;
}
.cover-wrap {
  /* 实现遮罩效果，动态变化 */
  display: flex;
  /* 使用flex布局, 元素垂直居中对齐 */
  position: relative;
  /* 设置一个定位作用：使其内部元素绝对定位时是相对它来说的，确保按钮中心 */
  overflow: hidden;
  width: 100%;
  margin-bottom: 15px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cover-img {
  width: 100%;
  transition: all 0.75s;
  /* 渐变效果 */
}
.cover-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  /* 绝对定位使遮罩覆盖整个图片 */
  background: #000;
  opacity: 0;
  /* 初始状态完全透明，不可见 */
  transition: all 0.5s;
}
.cover-play {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 相对图片（父容器）绝对定位，使得播放按钮位于图片正中心 */
  margin-left: -35px;
  margin-top: -35px;
  opacity: 0;
  transform: scale(0.7);
  transition: all 0.5s;
}
.cover-wrap:hover .cover-mask {
  opacity: 0.2;
  /* 遮罩的不透明度渐变 */
}
.cover-wrap:hover .cover-play {
  opacity: 1;
  transform: scale(1);
  /* 播放按钮的不透明度和缩放渐变 */
}
.cover-wrap:hover .cover-img {
  transform: scale(1.07);
  /* 封面图片的缩放渐变 */
}
.album-title:hover {
  color: var(--primary-color);
  /* 悬浮时变成root设置颜色 */
}
.album-author {
  color: #999;
  line-height: 1.6;
}
.album-author:hover {
  color: var(--primary-color);
}
.album-time {
  color: #999;
}
.page {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 设置为flex方便直接垂直居中 */
}
.page-item {
  display: inline-block;
  /* 保留上下内外边距，且不添加换行符可位于其他元素旁边，和其他页码直接相连不换行 */
  color: #a2a2a2;
  line-height: 50px;
  padding: 0 20px;
  margin: 10px;
  font-size: 16px;
}
.page-current, .page-item:not(.page-more):hover {
  /* 添加鼠标悬停效果，且区分中间的省略号 */
  background: var(--primary-color);
  color: white;
}
footer {
  margin-top: 60px;
  background: #333;
  height: 200px;
}


